<script setup lang="ts">
import { startRuler } from '@editor/plugins/ruler'
import { startSnap } from '@editor/plugins/snap'
// import { Editor } from '@leafer-in/editor'
import { useResizeObserver } from '@vueuse/core'
import {
  App,
  Frame,
  Leafer,
  Path,
  Rect,
  Text,
} from 'leafer-ui'
import { DotMatrix } from 'leafer-x-dot-matrix'
import '@leafer-in/editor'
import '@leafer-in/viewport'
// import 'leafer-x-path-editor'

const containerRef = ref()
let app: App

function initEditor() {
  app = new App({
    view: 'main-editor-canvas',
    tree: { type: 'viewport' },
    editor: {
      editSize: 'size',
      point: {
        editConfig: { editSize: 'scale' },
        pointType: 'resize',
      },
      circle: { pointType: 'rotate' },
    },
  })

  startSnap(app)
  startRuler(app)

  const dotMatrix = new DotMatrix(app)
  dotMatrix.enableDotMatrix(true)

  // app.tree.add(Rect.one({
  //   editable: true,
  //   fill: '#FEB027',
  //   cornerRadius: [20, 0, 0, 20],
  // }, 100, 100))

  // app.tree.add(Rect.one({
  //   editable: true,
  //   fill: '#FFE04B',
  //   cornerRadius: [0, 20, 20, 0],
  // }, 150, 100))

  // const shape = new Path({
  //   x: 80,
  //   y: 100,
  //   fill: '#32cd79',
  //   path: 'M200 100C200 155.228 155.228 200 100 200C44.7715 200 0 155.228 0 100C0 44.7715 44.7715 0 100 0C155.228 0 200 44.7715 200 100Z',
  //   editable: true,
  // })

  const rect1 = new Rect({
    editable: true,
    fill: '#FEB027',
    cornerRadius: [20, 0, 0, 20],
    x: 200,
    y: 100,
    width: 50,
    height: 50,
  })
  const rect2 = new Rect({
    editable: true,
    fill: '#FEB027',
    cornerRadius: [20, 0, 0, 20],
    x: 50,
    y: 200,
    width: 80,
    height: 60,
  })

  const frame = new Frame({
    x: 200,
    y: 100,
    width: 300,
    height: 500,
  })

  // frame.add(shape)
  frame.add(rect1)
  frame.add(rect2)

  app.tree.add(frame)
}

onMounted(() => {
  initEditor()
})
</script>

<template>
  <div
    id="main-editor-canvas"
    ref="containerRef"
    class="main-canvas"
  />
</template>

<style lang="less" scoped>
.main-canvas {
  background-color: #f1f2f4;
  width: 100%;
  height: 100%;
}
</style>
